<template>
  <view class="mini-container">
    <view class="mini-container-header">
      <wd-navbar title="我的合同" left-arrow @click-left="handleClickLeft"></wd-navbar>
      <view class="mini-header">
        <view class="mini-header-num">
          <view class="flex-column">
            <view class="font28 mb16" style="opacity: 0.8">已付金额</view>
            <view class="font44">￥{{ paidAmount }}</view>
          </view>
          <view class="line"></view>
          <view class="flex-column">
            <view class="font28 mb16" style="opacity: 0.8">未付金额</view>
            <view class="font44">￥{{ unPaidAmount }}</view>
          </view>
        </view>
        <view class="mini-header-box"></view>
      </view>
    </view>
    <view class="nav-bar">
      <view class="nav-bar-top flex" v-show="show">
        <image style="width: 22rpx;height: 34rpx" @click="handleClickLeft"
               src="http://51-jzt-dev.oss-cn-hangzhou.aliyuncs.com/miniapp/ri.png"></image>
        <view class="text">我的合同</view>
      </view>
      <view v-show="show" style="background: #f8faff;height: 32rpx"></view>
      <view style="padding:0 32rpx 32rpx;background: #f8faff">
        <Tabs
            :list="list"
            v-model:current="current"
        />
      </view>
    </view>
    <view class="mini-content">
      <ContractList v-show="current===0"/>
      <ChangeInformation v-show="current===1"/>
      <div v-show="current===2">3</div>
    </view>
  </view>
</template>

<script setup>
import {ref} from "vue";
import Tabs from "@/components/tabs/index.vue"
import ContractList from './components/contractCard/index.vue'
import ChangeInformation from "./components/changeInformation/index.vue"
import {amount} from "@/api/contract";
import {onPageScroll} from '@dcloudio/uni-app'

const show = ref(false)
const current = ref(0)
const paidAmount = ref()
const unPaidAmount = ref()
const list = ref(["我的合同", "变更单"])
// const list = ref(["我的合同", "变更单", "方案图纸"])
const handleClickLeft = () => {
  uni.navigateBack()
}
const getAmount = async () => {
  const {data} = await amount()
  paidAmount.value = data.paidAmount
  unPaidAmount.value = data.unPaidAmount
}
getAmount()
onPageScroll((e) => {
  show.value = e.scrollTop >= 250;
})


</script>
<style lang="scss">
.desc {
  width: 452rpx !important;
}
</style>
<style scoped lang="scss">
@import "index";

</style>